<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <title></title>
</head>
<style>
    *{margin: 0; padding: 0; box-sizing: border-box; text-decoration: none;list-style:none}
    html,body{width: 100%; overflow: hidden;}
    #contentNav{width: 100%;margin-left:20px;height: 67px;overflow: hidden;}
    #contentNavul {height: 100%;transition: all ease 0s;}
    #contentNavul li{float: left;height: 65px;width: 105px; border: 1px solid #CCCCCC; text-align: center;
        color: #CCCCCC;line-height: 65px; margin-right: 10px;border-radius: 5px;font-size: 14px;}
    #contentNavul li.selected{background: blue;color: #FFFFFF}

</style>
<body>
<div id="contentNav">
    <ul id="contentNavul">
        <li class="selected">演讲者模式</li>
        <li>声控模式</li>
        <li>固定画面模式</li>
        <li>轮播图模式</li>
        <li>模式1</li>
        <li>模式2</li>
        <li>模式3</li>
    </ul>
</div>


</body>
<script>


    var hg = window.screen.width;
    var contentNav = document.getElementById("contentNav");
    contentNav.style.width = (hg-40) +'px';

    var contentNavul = contentNav.getElementsByTagName('ul')[0];
    var ali = contentNavul.getElementsByTagName('li');
    contentNavul.style.width = ali.length*(ali[0].offsetWidth+10)+'px';

    for (var i=0;i<ali.length;i++) {
        ali[i].index=i;
        ali[i].onclick=function(){
            for (var j=0;j<ali.length;j++) {
                ali[j].className="";
            }
            ali[this.index].className="selected";
            tocenter(this.index);
        };

        function tocenter(index){
            var disX = ali[index].offsetLeft;//当前div距离屏幕左边距离
            var divWidth = ali[index].offsetWidth;
            var resPlaceX = (hg - divWidth) / 2;
            var moveDistance = disX - resPlaceX;
            var a=getmarginleft(contentNavul.style.marginLeft);
            var translateX = a + -moveDistance;
            console.log(translateX)
            var maxleft=getmarginleft(contentNavul.style.width)-getmarginleft(contentNav.style.width);
            if(translateX > 0){
                translateX = 0;
            }
            if(translateX < 0){
                if(-translateX > maxleft){
                    translateX = -maxleft;
                }else{
                    translateX = translateX;
                }
            }
            contentNavul.style.marginLeft = translateX  +"px";

        }

        function getmarginleft(a){
            a=a.slice(a.indexOf('(') + 1,a.indexOf('px'));
            if (a == '') {a = 0};
            a= parseFloat(a);
            return a;
        }
        var startX=0;
        var a=0;
        contentNavul.ontouchstart=function(e){
            var touchestartEv = e || event;
            startX = touchestartEv.touches[0].clientX;
            a=getmarginleft(contentNavul.style.marginLeft);
        }

        contentNavul.ontouchmove=function(ev) {
            var touchmoveEv = ev || event;
            var moveX = touchmoveEv.touches[0].clientX;
            ;
            var translateX = startX - moveX - a;
            var maxleft = getmarginleft(contentNavul.style.width) - getmarginleft(contentNav.style.width);
            if (translateX > maxleft) {
                translateX = maxleft;
            }
            if (translateX < 0) {
                translateX = 0;
            }
            console.log(translateX);
            contentNavul.style.marginLeft = "-" + translateX + "px";
        }
</script>
</html>